<template>
    <div id="log">
         <van-field
        :border='flag'
        v-model="username"
        clearable
        placeholder="请输入手机号"
         />
         <div>
            <input v-model="password" class="yanzheng" type="text" placeholder="请输入验证码">
         <button id="send">获取验证码</button>
         </div>
        <van-button class="btn" @click="load" type="primary" size="large" :color='genggai' >登录</van-button>
    </div>
</template>

<script>
    export default {
        name:'phone',
        data() {
            return {
                flag:false,
                 username:'',
                password:'',

            }
        },
        methods: {
            load(){

            }
        },
        computed: {
            genggai:function(){
                if(this.username!==""&&this. password!==""){
                    return '#000000'
                }else{
                    return '#d2d2d2'
                }
            },
        },
    }
</script>

<style  scoped>
 .van-cell{
        border-bottom:1px solid #cccccc;
        height: 80px;
        line-height: 80px;
        font-size: 27px;
        padding: 0;
    }
    .btn{
        margin-top:81px;
        height:89px;
        font-size: 28px
    }
    .send{
        height: 80px;
        font-size: 27px;
        float: right
    }
    #log{
        width: 579px;
        margin: 0 auto;
    }
    .yanzheng  {
        display: block;
        border: none;
        border-bottom:1px solid #cccccc;
        height: 80px;
        line-height: 80px;
        font-size: 27px;
        color: #cccccc;
        float: left;
        width:360px;

    }
    #send{
        border: 1px solid #cccccc;
        float: right;
        display:block;
         height: 70px;
        line-height: 70px;
        font-size: 27px;
        color: #cccccc;
        background: none;
        margin-top: 15px;
    }
</style>